<template name="mars-new-item">
	<view>	
		<view class="page-list-item">
			<navigator :url="path+item.id">
			<view class="title text-ellipsis">{{item.title}}</view>
			<view class="content flex-row">
				<view class="info">
					<view class="summary" v-if="item.brief">{{item.brief}}</view>
					<view class="flex-row">
						<text class="date">{{item.ctime}}</text>
						<text class="views">[ {{item.type_name}} ]</text>
					</view>
				</view>
				<view class="cover" v-if="item.cover">
					<image class="img" :src="item.cover"></image>
				</view>
			</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'mars-new-item',
		props: {
			item:{
				type:[Object,Array],
				default:{}
			},
			path:{
				type:[String],
				default:''
			},
		},
		data() {
			return {

			}
		},
		watch: {
		},
		computed: {
		},
		mounted(){
		},
		methods: {
			
		}
	};
</script>

<style lang="scss">	
	.page-list-item {
	    padding: 20rpx;
	    margin-bottom: 20rpx;
	    background-color: #FFF;
	}
	
	.title{
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F5F5F5;
	}
	
	.content{
		padding-top: 20rpx;
		align-items: flex-start;
		
		.info{
			width: calc(100% - 160rpx);
			
			.summary{
				color: #777;
				height: 80rpx;
				font-size: 24rpx;
				line-height: 1.6;
				margin-bottom: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.date{
				color: #999;
				font-size: 24rpx;
				opacity: 0.6;
			}
			
			.views{
			    margin-left: 20rpx;
				color: #999;
				font-size: 24rpx;
			}
		}
		
		.cover{
			width: 140rpx;
			height: 120rpx;
			
			.img{
				width: 100%;
				height: 100%;
				border-radius: 4rpx;
			}
		}
	}
	
	/*flex布局*/
	.flex-flow{
		display: flex;
		flex-flow: row wrap;
	}
	.flex-row{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.flex-column{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	/*文本截取*/
	.text-ellipsis{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/*间距*/
	.space{
		height: 20rpx;
	}
	.space.small{
		height: 10rpx;
	}
	.space.big{
		height: 30rpx;
	}
	
	/*容器*/
	.container{
		min-height: 100vh;
		background-color: #F9F9F9;
	}
</style>
